.practicing-wrapper > .content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 80px;

  >.text {
    padding: 30px 0;
    text-align: center;
    color: var(--base-text-color-bold);
    font-weight: bolder;
    font-size: 1.2em;
    white-space: pre-line;
  }
  
  .sentence-box {
    margin-top: 30px;
    width: 80%;
    height: 230px;
    padding: 30px 10%;
    background-color: var(--box-bg-color);
    border-radius: 10px;
    box-shadow: var(--base-box-shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    div.en .m-input {
      width: auto;
      margin-bottom: 20px;
      .m-input__inner {
        border-top: none;
        border-left: none;
        border-right: none;
        text-align: center;
        border-radius: 0;
        font-size: 1.2em;
      }

      &.m-input.error .m-input__inner {
        animation: textMove 0.5s;
        color: var(--danger-color);
        border-color: var(--danger-color);
      }
    }
    div.en .text {
      color: var(--success-color);
    }
    div.analysis .text {
      font-size: 1em;
      color: var(--base-text-color);
      white-space: pre-line;
    }

    span.btn {
      cursor: pointer;
      color: var(--primary-color);
      font-size: 1em;
    }

    div.btn {
      text-align: right;
      margin-right: -15%;
    }
  }
  // 单词
  .word-box {
    width: 80%;
    height: 230px;
    padding: 0 10% 30px;

  
    div.en {
      display: flex;
      justify-content: center;
      align-items: center;

      .m-audio .svg-icon.icon-voice {
        fill: var(--base-text-color-bold);
        transform: translate(-16px, 6px);
      }
    }

    div.en.error span.fill {
      animation: textMove 0.5s;
      border-color: var(--danger-color);
    }

    span.fill {
      display: inline-block;
      width: 20px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      font-weight: bolder;
      font-size: 1.4em;
      margin: 0 4px;
      border-bottom: 4px solid var(--base-text-color);
      cursor: text;

      &.text {
        border-bottom: none;
        transform: translateY(6px);
      }
    }
    span.fill.success {
      color: var(--success-color);
      border-bottom: none;
    }
    span.fill.error {
      color: var(--danger-color);
    }
  }
}

@keyframes textMove2 {
  0% {transform: perspective(550px)rotatex(55deg);}
  50% {transform: perspective(550px)rotatex(-55deg);}
  100% {transform: perspective(550px)rotatex(55deg);}
}

@keyframes textMove {
  0% {
    transform: perspective(550px)translateX(-3px);
  }

  30% {
    transform: perspective(550px)translateX(3px);
  }

  70% {
    transform: perspective(550px)translateX(-3px);
  }

  100% {
    transform: perspective(550px)translateX(3px);
  }
}